/* 自定义 element 暗黑模式 */
html.dark {
  /* wangEditor */
  --w-e-toolbar-color: #eeeeee;
  --w-e-toolbar-bg-color: #141414;
  --w-e-textarea-bg-color: #141414;
  --w-e-textarea-color: #eeeeee;

  /* login */
  .login {
    background-color: #191919 !important;

    .content {
      background-color: rgb(0 0 0 / 60%) !important;
      box-shadow: 2px 3px 20px 4px #10184b !important;

      .login-left {
        box-shadow: none;
      }

      .input-format {
        box-shadow: rgb(255 255 255 / 12%) 0 2px 10px 2px !important;

        .title {
          color: var(--el-text-color-primary) !important;
        }
      }
    }
  }

  /* layout */
  .el-container {
    // columns layout
    .aside-split {
      background-color: var(--el-bg-color) !important;

      .logo {
        border-bottom: 1px solid var(--el-border-color-light) !important;
      }
    }

    .el-header {
      background-color: var(--el-bg-color) !important;
    }
  }

  /* 全局暗黑主题样式 */
  --el-bg-color: #141414;
  --el-text-color-primary: #ffffff;
  --el-bg-color-page: #0f0f0f;
  --el-bg-color-overlay: #1f1f1f;
  --el-border-color: #303030;
  --el-border-color-light: #303030;
  --el-border-color-lighter: #303030;
  --el-border-color-extra-light: #303030;
  --el-border-color-dark: #303030;
  --el-border-color-darker: #303030;

  /* Element Plus 组件暗黑主题 */
  .el-menu {
    background-color: #1f1f1f !important;
    border-right-color: #303030 !important;
  }

  .el-menu-item {
    color: #ffffff !important;
    
    .el-icon {
      color: #ffffff !important;
    }
    
    .sle {
      color: #ffffff !important;
    }
  }

  .el-menu-item:hover {
    background-color: #303030 !important;
    color: #409eff !important;
    
    .el-icon {
      color: #409eff !important;
    }
    
    .sle {
      color: #409eff !important;
    }
  }

  .el-menu-item.is-active {
    background-color: #409eff !important;
    color: #ffffff !important;
    
    .el-icon {
      color: #ffffff !important;
    }
    
    .sle {
      color: #ffffff !important;
    }
  }

  .el-sub-menu .el-sub-menu__title {
    color: #ffffff !important;
    
    .el-icon {
      color: #ffffff !important;
    }
    
    .sle {
      color: #ffffff !important;
    }
  }

  .el-sub-menu .el-sub-menu__title:hover {
    background-color: #303030 !important;
    color: #409eff !important;
    
    .el-icon {
      color: #409eff !important;
    }
    
    .sle {
      color: #409eff !important;
    }
  }

  .el-header {
    background-color: #1f1f1f !important;
    border-bottom-color: #303030 !important;
  }

  .el-main {
    background-color: #141414 !important;
    color: #ffffff !important;
  }

  .el-aside {
    background-color: #1f1f1f !important;
  }

  .el-container {
    background-color: #141414 !important;
  }

  /* 暗黑主题下的图标颜色 */
  .iconfont,
  .el-icon {
    color: var(--el-text-color-primary) !important;
  }

  .toolBar-icon {
    color: var(--el-text-color-primary) !important;
  }

  .toolBar-icon:hover {
    color: var(--el-color-primary) !important;
  }

  /* 面包屑 */
  .el-breadcrumb__inner {
    color: var(--el-text-color-primary) !important;
  }

  .el-breadcrumb__inner.is-link:hover {
    color: var(--el-color-primary) !important;
  }

  /* 用户名 */
  .username {
    color: var(--el-text-color-primary) !important;
  }
}
